<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转按钮</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 20px;
        }

        ul {
            list-style: none;
            margin-bottom: 30px;
            overflow: hidden;
        }

        ul li {
            float: left;
            margin: 10px;
        }

        ul a {
            display: block;
            float: left;
            text-decoration: none;
        }

        ul img {
            border: 0;
        }

        #box img:hover {
            -moz-transform: rotate(360deg) scale(1.5);
            -webkit-transform: rotate(360deg) scale(1.5);
            -o-transform: rotate(360deg) scale(1.5);
            -ms-transform: rotate(360deg) scale(1.5);
            transform: rotate(360deg) scale(1.5);
        }

    </style>
</head>
<body>
<h2>顺时针旋转360度放大1.2倍</h2>
<ul id="box">
    <li><a href="#"><img src="../zuoye11-11/image/rss.png" alt=""/></a></li>
    <li><a href="#"><img src="../zuoye11-11/image/delicious.png" alt=""/></a></li>
    <li><a href="#"><img src="../zuoye11-11/image/facebook.png" alt=""/></a></li>
    <li><a href="#"><img src="../zuoye11-11/image/twitter.png" alt=""/></a></li>
    <li><a href="#"><img src="../zuoye11-11/image/yahoo.png" alt=""/></a></li>
</ul>

</body>
</html>